<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生夜宵点餐系统 - 订单确认</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <header>
        <div class="header-container">
            <h1>学生夜宵点餐系统</h1>
            <div class="user-info">
                <span id="username">欢迎，学生</span>
            </div>
        </div>
    </header>
    
    <div class="container">
        <div class="order-confirm">
            <h2>订单确认</h2>
            
            <div class="order-info">
                <h3>订单信息</h3>
                <p><strong>用户名：</strong><span id="userName"></span></p>
                <p><strong>联系方式：</strong><span id="userContact"></span></p>
                <p><strong>配送地址：</strong><span id="userAddress"></span></p>
                <p><strong>下单时间：</strong><span id="orderTime"></span></p>
                <p><strong>订单状态：</strong><span id="orderStatus">待支付</span></p>
            </div>
            
            <div class="order-items">
                <h3>菜品列表</h3>
                <table class="order-items-table">
                    <thead>
                        <tr>
                            <th>菜品名称</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                        </tr>
                    </thead>
                    <tbody id="orderItemsTable">
                        <!-- 菜品列表将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
            
            <div class="order-total">
                <h3>订单总计：¥<span id="totalAmount">0.00</span></h3>
            </div>
            
            <div class="order-actions">
                <button id="backBtn" class="btn-back">返回购物车</button>
                <button id="payBtn" class="btn-pay">确认支付</button>
            </div>
        </div>
    </div>
    
    <!-- 支付成功模态框 -->
    <div id="paySuccessModal" class="modal">
        <div class="modal-content">
            <div class="success-icon">✓</div>
            <h2>支付成功！</h2>
            <p>您的订单已提交，等待配送员接单。</p>
            <button id="viewOrdersBtn" class="btn-view-orders">查看订单</button>
        </div>
    </div>
    
    <!-- 通用反馈模态框 -->
    <div id="feedbackModal" class="modal">
        <div class="modal-content">
            <div class="feedback-icon" id="feedbackIcon"></div>
            <h2 id="feedbackTitle"></h2>
            <p id="feedbackMessage"></p>
            <button id="feedbackConfirmBtn" class="btn-view-orders">确定</button>
        </div>
    </div>
    
    <script src="../js/order_confirm.js"></script>
</body>
</html>